<template>
    <div class="study-research">
        <h3 align="center">学习情况</h3>
        <!-- 第一行卡片 -->
        <el-row justify="center">
            <el-col :span="5" class="table-col">
                <el-card shadow="hover" class="first-card">
                    <el-statistic title="已修学分" :value="totalCredits" />
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card shadow="hover" class="first-card">
                    <el-statistic title="课程通过率" :value="parseFloat(passRate)" suffix="%" />
                    <div class="footer-item">
                        已修课程
                        <span class="blue enlarge">{{ totalCourses }}</span>
                        门，通过课程
                        <span class="green enlarge">{{ totalPassedCourses }}</span>
                        门
                    </div>
                </el-card>
            </el-col>
            <el-col :span="5" class="table-col-1">
                <el-card shadow="hover" class="first-card">
                    <el-statistic title="平均绩点" :value="parseFloat(averageGPA)" :precision="1">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                平均绩点
                                <el-tooltip effect="dark" content="平均加权学分绩点" placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
        </el-row>

        <!-- 第二行卡片 -->
        <el-row justify="center">
            <el-col :span="16">
                <el-card shadow="hover">
                    <el-table
                        :data="studyTableData"
                        ref="table"
                        :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }"
                        height="450"
                        empty-text="暂无数据"
                        :loading="isStudiesLoading"
                        :default-sort="{ prop: 'semester', order: 'descending' }"
                    >
                        <el-table-column prop="semester" label="学年学期" sortable />
                        <el-table-column prop="lesson" label="课程名称" sortable />
                        <el-table-column prop="credit" label="学分" sortable />
                        <el-table-column prop="score" label="成绩" sortable />
                        <el-table-column prop="isRestudy" :formatter="isRestudyFormatter" label="是否重修" sortable />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <h3 align="center">科研创新</h3>
        <!-- 第三行卡片 -->
        <el-row justify="center">
            <el-col :span="4">
                <el-card shadow="hover" style="height: 130px">
                    <img src="@/assets/thesis.png" class="image1" />
                    <el-statistic
                        title="论文"
                        :value="achievementCounts.paperCount"
                        suffix="篇"
                        class="demo-class"
                        :value-style="{ color: '#FF9935' }"
                    />
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" style="height: 130px">
                    <img src="@/assets/work.png" class="image1" />
                    <el-statistic
                        title="著作"
                        :value="achievementCounts.bookCount"
                        suffix="部"
                        class="demo-class"
                        :value-style="{ color: '#77BD61' }"
                    />
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" style="height: 130px">
                    <img src="@/assets/patent.png" class="image1" />
                    <el-statistic
                        title="专利"
                        :value="achievementCounts.patentCount"
                        suffix="篇"
                        class="demo-class"
                        :value-style="{ color: '#B57BEA' }"
                    />
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" style="height: 130px">
                    <img src="@/assets/softness.png" class="image1" />
                    <el-statistic
                        title="软著"
                        :value="achievementCounts.softwareCount"
                        suffix="部"
                        class="demo-class"
                        :value-style="{ color: '#66A4EE' }"
                    />
                </el-card>
            </el-col>
        </el-row>

        <!-- 第四行卡片 -->
        <el-row justify="center">
            <el-col :span="16">
                <el-card shadow="hover">
                    <el-table
                        :data="researchTableData"
                        ref="table"
                        :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }"
                        height="450"
                        empty-text="暂无数据"
                        :loading="isResearchesLoading"
                        :default-sort="{ prop: 'date', order: 'descending' }"
                    >
                        <el-table-column prop="name" label="成果名称" sortable />
                        <el-table-column prop="type" label="成果类别" sortable />
                        <el-table-column prop="date" label="取得时间" sortable />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script></script>

<script setup>
import { Warning } from '@element-plus/icons-vue'
import { reactive, ref, onMounted, watch, computed } from 'vue'
import api from '@/api/student'

const props = defineProps({
    study: Object,
})

const achievementCounts = reactive({
    paperCount: 0,
    bookCount: 0,
    patentCount: 0,
    softwareCount: 0,
})

const studyTableData = reactive([])
const researchTableData = reactive([])

const isStudiesLoading = ref(false)
const isResearchesLoading = ref(false)

const isRestudyFormatter = (row, column, cellValue) => {
    return cellValue ? '是' : '否'
}

const totalCredits = computed(() => {
    if (!studyTableData.length) return 0

    return studyTableData.reduce((total, study) => total + study.credit, 0)
})

const totalCourses = computed(() => {
    return studyTableData.length || 0
})

const totalPassedCourses = computed(() => {
    if (!studyTableData.length) return 0

    return studyTableData.filter((study) => study.score >= 60).length
})

const passRate = computed(() => {
    if (!totalCourses.value) return 0
    const rate = (totalPassedCourses.value / totalCourses.value) * 100

    return parseFloat(rate.toFixed(2))
})

const averageGPA = computed(() => {
    if (!totalCredits.value) return 0
    const weightedSum = studyTableData.reduce((total, study) => {
        const gpa =
            study.score >= 90
                ? 4.0
                : study.score >= 85
                ? 3.7
                : study.score >= 82
                ? 3.3
                : study.score >= 78
                ? 3.0
                : study.score >= 75
                ? 2.7
                : study.score >= 72
                ? 2.3
                : study.score >= 68
                ? 2.0
                : study.score >= 64
                ? 1.5
                : study.score >= 60
                ? 1.0
                : 0

        return total + gpa * study.credit
    }, 0)

    return totalCredits.value > 0 ? weightedSum / totalCredits.value : 0
})

const getStudies = async () => {
    if (props.study && props.study.id) {
        isStudiesLoading.value = true
        try {
            const response = await api.getStudies(props.study.id)
            studyTableData.splice(0)
            response.data.forEach((item) => {
                item.credit = parseFloat(item.credit)
                item.score = parseFloat(item.score)
            })
            studyTableData.push(...response.data)
        } catch (error) {
            console.error(error)
        } finally {
            isStudiesLoading.value = false
        }
    }
}
const getResearches = async () => {
    if (props.study && props.study.id) {
        isResearchesLoading.value = true
        try {
            const response = await api.getResearches(props.study.id)
            researchTableData.splice(0)
            researchTableData.push(...response.data)

            achievementCounts.paperCount = response.data.filter((item) => item.type === '论文').length
            achievementCounts.bookCount = response.data.filter((item) => item.type === '著作').length
            achievementCounts.patentCount = response.data.filter((item) => item.type === '专利').length
            achievementCounts.softwareCount = response.data.filter((item) => item.type === '软著').length
        } catch (error) {
            console.error(error)
        } finally {
            isResearchesLoading.value = false
        }
    }
}

onMounted(async () => {
    await getStudies()
    await getResearches()
})

watch(
    () => props.study,
    async (newVal, oldVal) => {
        if (newVal.id === oldVal.id) return
        await getStudies()
        await getResearches()
    },
    { deep: true }
)
</script>

<style scoped>
.study-research {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e8e8e8;
}

.el-row {
    width: 100%;
}

.el-col {
    flex: 1;
    box-sizing: border-box;
}

.el-card {
    width: 100%;
    margin: 0 0 10px 0;
}

.table-col {
    margin: 0 30px 0 0;
}

.table-col-1 {
    margin: 0 0 0 30px;
}

.el-row {
    margin: 0 0 10px 0;
}

.first-card {
    height: 110px;
    border-radius: 15px;
}

.footer-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-top: 2px;
}

.blue {
    color: blue;
}

.green {
    color: var(--el-color-success);
}

.enlarge {
    font-size: 1.5em;
    margin: 4px;
}

.image1 {
    position: relative;
    top: 15px;
    left: 30px;
    width: 50px;
    display: block;
}

.demo-class {
    position: relative;
    top: -35px;
    left: 100px;
    width: 100px;
    /* border: solid rgb(0, 255, 47) 1px; */
}
</style>
